<template>
	<view style="height: 100vh;" @touchstart="start" @touchend="end">
		<view style="display: flex;">
			<view style="width: 50%;height: 30px;text-align: center;line-height: 30px;" :class="!team? 'title':''"
				@click="one">
				私聊
			</view>
			<view style="width: 50%;height: 30px;text-align: center;line-height: 30px;" :class="team? 'title':''"
				@click="team1">
				群聊
			</view>
		</view>
		<view v-if="!team" :key="1">
			<view v-if="messageList.length==0" style="text-align: center; margin-top: 10px;">
				暂无聊天列表
			</view>
			<view class="messageList" v-for="item in messageList" :key="item.userId"
				@click="goToChat(item.userId,item.userName)" hover-class="listHover"
				@longpress="delSession(item.sessionId)">
				<u-avatar :src="item.headPicture"  size="16vw"></u-avatar>
				<view class="userInfoBox">
					<view class="userInfo">
						{{item.userName}}
						<text>{{changeTime(item.lastMsgTime)}}</text>
					</view>
					<view class="message" v-if="item.type==1">
						[图片]
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
					<view class="message" v-else-if="item.type==2">
						[视频通话]
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
					<view class="message" v-else-if="item.type==6">
						[语音通话]
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
					<view class="message" v-else>
						{{item.lastMsg}}
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
				</view>
			</view>
		</view>

		<view v-else>
			<view v-if="teamMessageList.length==0" style="text-align: center; margin-top: 10px;">
				暂无聊天列表
			</view>
			<view class="messageList" v-for="item in teamMessageList" :key="item.userId"
				@click="goToTeamChat(item.teamId,item.userName)" hover-class="listHover"
				@longpress="delTeamSession(item.sessionId)">
				<u-avatar :src="item.headPicture"  size="16vw"></u-avatar>
				<view class="userInfoBox">
					<view class="userInfo">
						{{item.userName}}
						<text>{{changeTime(item.lastMsgTime)}}</text>
					</view>
					<view class="message" v-if="item.type==1">
						[图片]
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
					<view class="message" v-else-if="item.type==2">
						[视频通话]
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
					<view class="message" v-else-if="item.type==6">
						[语音通话]
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
					<view class="message" v-else>
						{{item.lastMsg}}
						<text v-if="item.unReadCount!=0">{{item.unReadCount}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dateTime from '../../../utils/dateTime.js';
	import permision from "@/js_sdk/wa-permission/permission.js"
	export default {
		data() {
			return {
				messageList: [],
				token: uni.getStorageSync("token"),
				userId: uni.getStorageSync("userId"),
				team: false,
				startTime: 0,
				startPosition: 0,
				endPosition: 0
			}
		},
		methods: {
			// 触摸touch事件
			start(event) { //@touchstart 触摸开始
				this.startTime = Date.now()
				this.startPosition = event.changedTouches[0].clientX
			},
			end(event) { //@touchend触摸结束
				const endTime = Date.now()
				if (endTime - this.startTime > 2000) {
					return;
				}
				this.endPosition = event.changedTouches[0].clientX
				//当移动距离超过10时判断左滑右滑。
				if (Math.abs(this.endPosition - this.startPosition) > 10) {
					this.endPosition = event.changedTouches[0].clientX
					var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
					if (this.endPosition - this.startPosition > 0) {
						this.one()
					} else {
						this.team1()
					}
				} else {
					return;
				}

				console.log(elePosition)
			},
			one() {
				this.team = false;
			},
			team1() {
				this.team = true;
			},
			delSession(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: getApp().url + 'sessionList/delSession',
								data: {
									sessionId: e
								},
								header: {
									token: uni.getStorageSync("token")
								},
								method: "GET",
								success: (response) => {
									if (response.data.code == -1) {
										return uni.showToast({
											icon: "error",
											title: response.data.msg
										});
									};
									that.getLastMsgList()
								},
								fail: (error) => {
									console.log(error);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			delTeamSession(e) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success: function(res) {
						if (res.confirm) {
							uni.request({
								url: getApp().url + 'teamSessionList/delSession',
								data: {
									sessionId: e
								},
								header: {
									token: uni.getStorageSync("token")
								},
								method: "GET",
								success: (response) => {
									if (response.data.code == -1) {
										return uni.showToast({
											icon: "error",
											title: response.data.msg
										});
									};
									that.getTeamLastMsgList()
								},
								fail: (error) => {
									console.log(error);
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			changeTime(date) {
				return dateTime.dateTime(date);
			},
			// 进入对应的聊天页面
			goToChat(userId, userName) {
				uni.navigateTo({
					url: "/pages/contact/chat/chat?userId=" + userId + "&userName=" + userName
				})
			},
			// 进入对应的聊天页面
			goToTeamChat(teamId, teamName) {
				uni.navigateTo({
					url: "/pages/contact/teamChat/teamChat?teamId=" + teamId + "&teamName=" + teamName
				})
			},
			getLastMsgList() {
				uni.request({
					url: getApp().url + 'sessionList/getSessionList',
					data: {
						userId: uni.getStorageSync("userId"),
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.messageList = response.data.data
						this.$forceUpdate()
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getTeamLastMsgList() {
				uni.request({
					url: getApp().url + 'teamSessionList/getLastMsgList',
					data: {
						userId: uni.getStorageSync("userId"),
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.teamMessageList = response.data.data
						this.$forceUpdate()
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getMsg() {
				this.$nextTick(() => {
					this.getLastMsgList();
					this.getTeamLastMsgList();
				})
			}
		},
		async onLoad() {
			uni.$on('update', this.getMsg);
		},
		onShow() {
			setTimeout(() => {
				this.getLastMsgList();
				this.getTeamLastMsgList();
			}, 500)
		},
		onPullDownRefresh() {
			this.getLastMsgList();
			this.getTeamLastMsgList();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss">
	.title {
		background-color: #41A863;
		color: #fff;
	}

	.messageList {
		display: flex;
		padding: 5px 2vw;

		.userInfoBox {
			width: 80vw;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.userInfo {
				display: flex;
				justify-content: space-between;
				margin: 0 2vw;

				text {
					font-size: x-small;
				}
			}

			.message {
				display: flex;
				justify-content: space-between;
				margin: 0 2vw;
				font-size: small;
				color: #A09D9D;

				text {
					width: 16px;
					height: 16px;
					border-radius: 8px;
					text-align: center;
					line-height: 16px;
					background-color: #A09D9D;
					color: #fff;
					font-size: x-small;
				}
			}
		}
	}

	.listHover {
		background-color: #C3C3C3;
	}
</style>